<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>起点登记</title>
  
  <style>
    /* 基础样式 */
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: 'Microsoft YaHei', sans-serif;
    }
    
    body {
      background-color: #f5f5f5;
      padding: 20px;
    }
    
    .container {
      max-width: 600px;
      margin: 0 auto;
      background-color: white;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      padding: 30px;
    }
    
    h1 {
      text-align: center;
      margin-bottom: 30px;
      color: #333;
    }
    
    .form-group {
      margin-bottom: 20px;
    }
    
    label {
      display: block;
      margin-bottom: 8px;
      font-weight: bold;
      color: #555;
    }
    
    input, select {
      width: 100%;
      padding: 12px;
      border: 1px solid #ddd;
      border-radius: 4px;
      font-size: 16px;
      transition: border-color 0.3s;
    }
    
    input:focus, select:focus {
      border-color: #4CAF50;
      outline: none;
    }
    
    .weight-group {
      display: flex;
      gap: 10px;
    }
    
    .weight-group input {
      flex: 1;
    }
    
    .submit-btn {
      width: 100%;
      padding: 14px;
      background-color: #4CAF50;
      color: white;
      border: none;
      border-radius: 4px;
      font-size: 16px;
      cursor: pointer;
      transition: background-color 0.3s;
      margin-top: 20px;
    }
    
    .submit-btn:hover {
      background-color: #45a049;
    }
    
    .submit-btn:disabled {
      background-color: #cccccc;
      cursor: not-allowed;
    }
    
    /* 图片预览容器 */
    .preview-container {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 10px;
    }
    
    .preview-item {
      width: calc(33.333% - 10px);
      border: 1px dashed #ccc;
      padding: 5px;
      border-radius: 4px;
      position: relative;
      background-color: #f9f9f9;
    }
    
    .preview-item img {
      width: 100%;
      height: 100px;
      object-fit: cover;
      cursor: pointer;
      transition: transform 0.3s;
    }
    
    .preview-item img:hover {
      transform: scale(1.02);
    }
    
    .preview-info {
      font-size: 12px;
      color: #666;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      margin-top: 5px;
    }
    
    .preview-placeholder {
      color: #999;
      text-align: center;
      padding: 20px;
      border: 1px dashed #ddd;
      border-radius: 4px;
      width: 100%;
    }
    
    .remove-btn {
      position: absolute;
      top: 5px;
      right: 5px;
      background-color: rgba(255,0,0,0.7);
      color: white;
      border: none;
      border-radius: 50%;
      width: 20px;
      height: 20px;
      font-size: 12px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 1;
    }
    
    /* 大图预览模态框 */
    .modal {
      display: none;
      position: fixed;
      z-index: 100;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0,0,0,0.9);
      overflow: auto;
      touch-action: manipulation;
    }
    
    .modal-content {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100%;
      padding: 20px;
    }
    
    .modal-img {
      max-width: 100%;
      max-height: 90vh;
      object-fit: contain;
      -webkit-user-select: none;
      user-select: none;
    }
    
    .close {
      position: absolute;
      top: 15px;
      right: 35px;
      color: #f1f1f1;
      font-size: 40px;
      font-weight: bold;
      cursor: pointer;
    }
    
    /* 移动端优化 */
    @media (max-width: 768px) {
      .container {
        padding: 20px;
      }
      
      h1 {
        font-size: 24px;
      }
      
      .preview-item {
        width: calc(50% - 10px);
      }
      
      .close {
        right: 20px;
        font-size: 35px;
      }
    }
  </style>

  <link rel="stylesheet" href="./weui/weui.min.css">

</head>
<body>
  <div class="container">
    <h1>起点登记</h1>
        <button class="weui-btn weui-btn_primary test-btn" onclick="testWeUIToast()">测试Toast提示</button>
    <form id="orderForm">
      <div class="form-group">
        <label>公司名称</label>
        <input type="text" id="company" placeholder="请输入公司名称" required>
      </div>
      
      <div class="form-group">
        <label>货物重量 (kg)</label>
        <div class="weight-group">
          <input type="number" id="emptyWeight" placeholder="空车重量" min="1" required>
          <input type="number" id="fullWeight" placeholder="满载重量" min="1" required>
        </div>
      </div>
      
      <div class="form-group">
        <label>货物照片</label>
        <input type="file" id="cargoPhotos" accept="image/*" multiple required>
        <div class="preview-container" id="cargoPreviews">
          <div class="preview-placeholder">请上传货物照片</div>
        </div>
      </div>
      
      <button type="submit" class="submit-btn" id="submitBtn">提交登记</button>
    </form>
  </div>

  <!-- 大图预览模态框 -->
  <div id="imageModal" class="modal">
    <span class="close">&times;</span>
    <div class="modal-content">
      <img id="modalImage" class="modal-img">
    </div>
  </div>
  <script src="./weui/axios.min.js"></script>
<script  src="./weui/weui.min.js"></script>
  <script src="./axios.js"></script>
  <script>

    // 页面初始化
      function testWeUIToast() {
        // console.log('[ request ] >', request)
      weui.toast('Toast测试成功', {
        duration: 2000,
        className: 'weui-toast_success'
      });
      // 测试请求
      request.get('https://jsonplaceholder.typicode.com/todos/1')
        .then(data => {
          console.log('请求成功:', data);
          weui.toast('请求成功', 2000);
        })
        .catch(error => {
          console.error('请求失败:', error);
          weui.toast('请求失败', 2000);
        });
    }
    document.addEventListener('DOMContentLoaded', function() {
      // 初始化模态框事件
      setupModal();
      
      // 设置图片上传预览
      setupImagePreviews();
      
      // 表单提交处理
      document.getElementById('orderForm').addEventListener('submit', function(e) {
        e.preventDefault();
        handleSubmit();
      });
    });

    // 设置大图预览模态框
    function setupModal() {
      const modal = document.getElementById('imageModal');
      const closeBtn = document.querySelector('.close');
      
      closeBtn.onclick = function() {
        modal.style.display = "none";
        document.body.style.overflow = 'auto';
      };
      
      // 点击模态框背景关闭
      modal.onclick = function(event) {
        if (event.target === modal) {
          modal.style.display = "none";
          document.body.style.overflow = 'auto';
        }
      };
    }

    // 显示大图预览
    function showLargePreview(imageSrc) {
      const modal = document.getElementById('imageModal');
      const modalImg = document.getElementById('modalImage');
      
      modal.style.display = "block";
      modalImg.src = imageSrc;
      
      // 禁用滚动
      document.body.style.overflow = 'hidden';
    }

    // 设置图片上传预览
    function setupImagePreviews() {
      const fileInput = document.getElementById('cargoPhotos');
      
      fileInput.addEventListener('change', function(e) {
        const previewContainer = document.getElementById('cargoPreviews');
        const files = e.target.files;
        
        if (files.length === 0) {
          previewContainer.innerHTML = '<div class="preview-placeholder">请上传货物照片</div>';
          return;
        }
        
        previewContainer.innerHTML = '';
        
        for (let i = 0; i < files.length; i++) {
          const file = files[i];
          
          if (!file.type.match('image.*')) continue;
          
          const reader = new FileReader();
          reader.onload = function(e) {
            const previewItem = document.createElement('div');
            previewItem.className = 'preview-item';
            previewItem.innerHTML = `
              <button class="remove-btn" data-index="${i}">×</button>
              <img src="${e.target.result}" alt="预览">
              <div class="preview-info">${file.name}</div>
            `;
            previewContainer.appendChild(previewItem);
            
            // 添加点击放大事件
            previewItem.querySelector('img').onclick = function() {
              showLargePreview(e.target.result);
            };
            
            // 添加删除按钮事件
            previewItem.querySelector('.remove-btn').onclick = function() {
              removeImage(this.dataset.index);
            };
          };
          reader.onerror = function() {
            console.error('图片加载失败');
          };
          reader.readAsDataURL(file);
        }
      });
    }

    // 移除图片
    function removeImage(index) {
      const fileInput = document.getElementById('cargoPhotos');
      const files = Array.from(fileInput.files);
      files.splice(index, 1);
      
      // 创建一个新的FileList对象
      const dataTransfer = new DataTransfer();
      files.forEach(file => dataTransfer.items.add(file));
      fileInput.files = dataTransfer.files;
      
      // 重新触发change事件更新预览
      const event = new Event('change');
      fileInput.dispatchEvent(event);
    }

    // 处理表单提交
    async function handleSubmit() {
      const submitBtn = document.getElementById('submitBtn');
      submitBtn.disabled = true;
      submitBtn.textContent = '提交中...';
      
      try {
        const company = document.getElementById('company').value.trim();
        const emptyWeight = document.getElementById('emptyWeight').value;
        const fullWeight = document.getElementById('fullWeight').value;
        const cargoPhotos = document.getElementById('cargoPhotos').files;
        
          // 修改验证逻辑，不再检查照片数量
        if (!company || !emptyWeight || !fullWeight || cargoPhotos.length === 0) {
          throw new Error('请填写所有必填字段，并至少上传1张货物照片');
        }

        if (parseInt(fullWeight) <= parseInt(emptyWeight)) {
          throw new Error('满载重量必须大于空车重量');
        }
    
        // 这里可以添加实际的提交逻辑
        // 例如使用fetch API发送数据到服务器
        console.log('提交数据:', {
          company,
          emptyWeight,
          fullWeight,
          photoCount: cargoPhotos.length
        });
        
        // 模拟提交延迟
        await new Promise(resolve => setTimeout(resolve, 1000));
        
        alert(`登记成功！\n公司: ${company}\n空车重量: ${emptyWeight}kg\n满载重量: ${fullWeight}kg\n照片数量: ${cargoPhotos.length}张`);
        
        // 提交成功后可以跳转到其他页面或重置表单
        // window.location.href = "success.html";
        // document.getElementById('orderForm').reset();
      } catch (error) {
        alert('提交失败: ' + error.message);
        console.error('提交错误:', error);
      } finally {
        submitBtn.disabled = false;
        submitBtn.textContent = '提交登记';
      }
    }
  </script>
</body>
</html>